<!DOCTYPE html>
<html lang="zn">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东放大镜</title>
    <style>
        .box {
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            float: left; /*设置浮动使得两个盒子在一排显示*/
            position: relative;/*设置定位 根据自身情况可以改为绝对定位 */
            margin: 10px;
        }
 
        .big {
            width: 600px;
            height: 600px;
            overflow: hidden;/*超出部分隐藏*/
            border: 1px solid #ccc;
            position: relative; /*设置定位 根据自身情况可以改为绝对定位 */
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
 
        .mask {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;/*在box类里面定位 层级高于展示图*/
            top: 0px;
            left: 0px;
            opacity: .5;/*设置遮罩层的透明度*/
            cursor: move;/*鼠标经过的时候变成十字拖动样式*/
            display: none;/*默认不显示 鼠标经过box时显示*/
        }
 
        .img {
            position: absolute;/*在big盒子里面绝对定位*/
            /*JavaScript需要赋值需要设置top和left值*/
            top: 0px;
            left: 0px;
            
        }
    </style>
</head>
 
<body>
    <div class="box">
        <img src="./沙箱/01.png" alt="" style="widht:100%;height:50%;">
        <div class="mask"></div>
    </div>
 
    <div class="big">
        <img src="./沙箱/01.png" alt="" class="img">
    </div>
 
    <script>
        var mask = document.querySelector('.mask');
        var box = document.querySelector('.box');
        var big = document.querySelector('.big');
        var img = document.querySelector('.img');
 
        box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
 
        });
 
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });
 
        box.addEventListener('mousemove', function (e) {
 
            //得到的x和y是鼠标在盒子内的坐标  this指向box
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
 
          //将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
 
 
            //设置最大移动距离
            var maskWidth = box.offsetWidth - mask.offsetWidth;
            var maskHeight = box.offsetHeight - mask.offsetHeight;
            //控制mask移动的范围
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskWidth) {
                maskX = maskWidth;
            }
 
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskHeight) {
                maskY = maskHeight;
            }
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
 
             //大图最大移动距离
            var imgWidth = img.offsetWidth - big.offsetWidth;
            var imgHeight = img.offsetHeight - big.offsetHeight;
 
            //大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离  
            var bigX = maskX * imgWidth / maskWidth;
            var bigY = maskY * imgHeight / maskHeight;
 
            //赋值
            img.style.left = (-bigX) + 'px';
            img.style.top = (-bigY) + 'px';
 
        });
 
    </script>
 
 
</body>
 
</html>